<template>
  <div id="app">
    <el-container class="layout">
      <el-header class="app-header">
        <div class="brand">
          <div class="logo">🍷</div>
          <div class="title">
            <div class="name">葡萄酒溯源系统</div>
            <div class="tagline">Wine Traceability Platform</div>
          </div>
        </div>
        <div class="header-actions">
          <el-input placeholder="搜索..." size="small" v-model="keyword" clearable>
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </el-header>
      <el-container>
        <el-aside width="220px" class="app-aside">
          <el-menu :default-active="$route.path" router class="aside-menu" background-color="transparent" text-color="#334155" active-text-color="#2563eb">
            <el-menu-item index="/winery">
              <el-icon><OfficeBuilding /></el-icon>
              <span>酒庄信息</span>
            </el-menu-item>
            <el-menu-item index="/vineyard">
              <el-icon><Location /></el-icon>
              <span>地块信息</span>
            </el-menu-item>
            <el-menu-item index="/harvest">
              <el-icon><ShoppingCart /></el-icon>
              <span>采收信息</span>
            </el-menu-item>
            <el-menu-item index="/preprocessing">
              <el-icon><Operation /></el-icon>
              <span>前处理信息</span>
            </el-menu-item>
            <el-menu-item index="/fermentation">
              <el-icon><Refresh /></el-icon>
              <span>发酵信息</span>
            </el-menu-item>
            <el-menu-item index="/storage">
              <el-icon><Box /></el-icon>
              <span>原酒贮存和陈酿</span>
            </el-menu-item>
            <el-menu-item index="/bottling">
              <el-icon><TakeawayBox /></el-icon>
              <span>罐装和包装</span>
            </el-menu-item>
            <el-menu-item index="/quality">
              <el-icon><Medal /></el-icon>
              <span>质量检验</span>
            </el-menu-item>
            <el-menu-item index="/order">
              <el-icon><Document /></el-icon>
              <span>订购信息</span>
            </el-menu-item>
            <el-menu-item index="/logistics">
              <el-icon><Truck /></el-icon>
              <span>物流信息</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="app-main">
          <div class="page-card">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return { keyword: '' }
  }
}
</script>

<style>
#app { height: 100vh; }
.layout { height: 100%; }

.app-header {
  background: linear-gradient(90deg, #e3f2ff, #e9f5ff);
  color: #0f172a;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #e5e7eb;
}
.brand { display:flex; align-items:center; gap:10px; }
.logo { font-size: 24px; }
.title .name { font-weight: 700; letter-spacing: .5px; }
.title .tagline { font-size: 12px; color: #64748b; }
.header-actions { display:flex; align-items:center; gap:10px; }

.app-aside {
  background: #f8fbff;
  border-right: 1px solid #e5e7eb;
}
.aside-menu { border-right: none; }
.aside-menu .el-menu-item.is-active {
  background: #eef6ff;
  border-right: 3px solid #2563eb;
}

.app-main { background: transparent; padding: 16px; }
.page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  padding: 16px;
}

.el-card { background: #ffffff; border: 1px solid #e5e7eb; }
.el-table, .el-dialog { background: #ffffff; color: #0f172a; }
.el-table th, .el-table td { background: transparent; color: #0f172a; }
.el-input__inner, .el-textarea__inner { background: #ffffff; color: #0f172a; border: 1px solid #dbe2ea; }
.el-button--primary { background: #3b82f6; border: 1px solid #3b82f6; }
.el-button--danger { background: #ef4444; border: 1px solid #ef4444; }
</style>
